<template>
<div class="app-container">
  <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
      <view class="search-view">
        <u--input v-model="calendarTitle" border="false" readonly class="search-input"
          suffixIcon="calendar" suffixIconStyle="color: #909399">
        </u--input>
          <u-icon name="arrow-left" color="#666666" size="25" label="上个月"
          labelPos="right" labelSize="25rpx" labelColor="#666666" @click="getPrev()"></u-icon>
          <u-icon name="arrow-right" color="#666666" size="25" style="margin-left:15px" label="下个月"
          labelPos="left" labelSize="25rpx" labelColor="#666666" @click="getNext()"></u-icon>
      </view>
    </u-sticky>
    <!-- 月视图和周视图显示，列视图显示表格形式 -->
    <div v-show="type !== '3'" ref="fullcalendar" class="card" />
    <u-list height="auto">
        <u-list-item v-for="(item, index) in  currentInfoList" :key="index">
          <view class="list-item">
            <view class="item-header" @click="enterDetails(item)">
            <u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
              :text="item.start+' '+item.title" size="25rpx" color="#333333" :bold="true"></u--text>
          </view>
          </view>
        </u-list-item>
        <view>
        </view>
      </u-list>
  </div>
      <!-- 悬停按钮刷新-->
      <refresh></refresh>
</template>

<script>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import dayjs from 'dayjs'
import { getAccountCalendarInfo } from '@/api/invest/accountAnalysis.js'
export default {
  name: 'PlanManagement',
  components: {},
  setup() {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      calendarTitle: new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月', // 日历头部显示文字
      dialogVisiable: false,
      loading: false,
      type: '1',
      dialogType: '',
      detailInfo: {},
      Tcalendar: null,
      drawerVisiable: false,
      drawerType: '',
      fullcalendar: ref(),
      nowDate: new Date(),
      infoList: [], // 日历显示的列信息
      currentInfoList: [] // 当前
    })
    onMounted(() => {
      initCalendar()
      getCalendarList()
    })
    const initCalendar = () => {
      state.Tcalendar = new Calendar(state.fullcalendar, {
        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        aspectRatio: 1,
        locale: 'zh-cn',
        handleWindowResize: true,
        editable: false, // 允许编辑表格
        droppable: false,
        eventDisplay: 'block',
        // height: 'auto',
        // 限制事件最大数量
        dayMaxEvents: 0,
        eventLimit: false,
        // 事件数量超出时更多显示链接汉化
        moreLinkContent: morLinkFunction,
        // 显示事件开始时间
        displayEventTime: false,
        // 显示事件结束时间
        displayEventEnd: false,
        // 关闭全天区域显示
        allDaySlot: true,
        longPressDelay: 0,
        selectLongPressDelay: 0,
        // 开始时间段
        slotMinTime: '00:00:00',
      
        // 结束时间段
        slotMaxTime: '00:00:00',
        eventOrder: 'type,color,start',
        eventDurationEditable: false,
        eventResizableFromStart: false,
        selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
        unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
        unselectCancel: '.el-drawer',
        // dayMaxEvents: true,
        // eventLimit: true,
        headerToolbar: false,
        buttonText: {
          today: '回到今天',
          month: '月',
          week: '周',
          list: '列',
          day: '日'
        },
        allDayText: '全天',
        events: state.infoList,
        eventClassNames: function (arg) {
          // 添加自定义class
          return [arg.event.extendedProps.class]
        },
        eventContent: function (arg) {
          const italicEl = document.createElement('div')
          if (arg.event.extendedProps.startDateMinute && state.type === '1') {
            const childEl = document.createElement('span')
            childEl.innerHTML = arg.event.extendedProps.startDateMinute
            italicEl.append(childEl)
          }
          italicEl.append(arg.event.title)
          italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
          return { domNodes: [italicEl] }
        },
        eventClick: function (info) {
      // 点击查看时触发
      handleClick(info)
    },
    select: function (info) {
      // 视图选择日期触发
      handleSelectDate(info)
    }
        // select: function (info) {}
      })
      state.Tcalendar.render()
    }
    // 上一月、周、日
    const getPrev = () => {
      state.Tcalendar.prev()
      state.calendarTitle = state.Tcalendar.view.title
      getCalendarList()
    }
    // 下一月、周、日
    const getNext = () => {
      state.Tcalendar.next()
      state.calendarTitle = state.Tcalendar.view.title
      getCalendarList()
    }
    // 回到今天
    const morLinkFunction = (jsEvent) => {
      return jsEvent.shortText;
    }
    const getCalendarList = () => {
      const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
      const params = {
        startTime: dayjs(state.Tcalendar.view.currentStart).format('YYYY-MM-DD'),
        endTime: dayjs(currentEnd).format('YYYY-MM-DD'),
        type: state.type
      }
      state.loading = true
      state.Tcalendar.getEventSources().forEach((item) => {
        item.remove()
      })

      getAccountCalendarInfo(params).then((res) => {
        state.loading = false
        if (res) {
          state.infoList = res.data
          const today= dayjs(new Date()).format('YYYY-MM-DD')
          state.infoList.forEach(item => {
            if(today===item.start){
              state.currentInfoList.push(item)
            }
          })
          state.Tcalendar.addEventSource(state.infoList)
        }
      })
    }

    const enterDetails = (info) => {
      const date = info.start
  const type = info.type
  const accountId = info.accountId
  const billDatePeriod = info.billDatePeriod
  //信用卡账单日
  if (type === 1) {
    const _id = accountId
    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}` })
  }
  //贷款已还
  if (type === 4) {
    const _id = accountId
    const billDatePeriod = date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}&dealType=1&dealCategory=9` })
  }
  //日常支出
  if (type === 5) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=1` })
  }

  //投资收益
  if (type === 6) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=2` })
  }
  //POS机刷卡
  if (type === 7) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=5` })
  }

  //工资收入
  if (type === 8) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=11` })

  }
    }
    // 点击计划查看
const handleClick = (info) => {
  const date = info.event.startStr
  const type = info.event._def.extendedProps.type
  const accountId = info.event._def.extendedProps.accountId
  const billDatePeriod = info.event._def.extendedProps.billDatePeriod
  //信用卡账单日
  if (type === 1) {
    const _id = accountId
    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}` })
  }
  //贷款已还
  if (type === 4) {
    const _id = accountId
    const billDatePeriod = date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?accountId=${_id}&billDatePeriod=${billDatePeriod}&dealType=1&dealCategory=9` })
  }
  //日常支出
  if (type === 5) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=1` })
  }

  //投资收益
  if (type === 6) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=2` })
  }
  //POS机刷卡
  if (type === 7) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealType=2&dealCategory=5` })
  }

  //工资收入
  if (type === 8) {
    const billDatePeriod =  date+'~'+date
    uni.navigateTo({ url: `/pages/calendar/list?billDatePeriod=${billDatePeriod}&dealCategory=11` })

  }
}
// 拖拽触发
const handleSelectDate = (info) => {
          const selectDate= info.startStr
          state.currentInfoList=[]
          state.infoList.forEach(item => {
            if(selectDate==item.start){
              state.currentInfoList.push(item)
            }
          })
}

    return {
      ...toRefs(state),
      getPrev,
      handleSelectDate,
      enterDetails,
      handleClick,
      getNext,
      morLinkFunction,
      getCalendarList
    }
  }
}
</script>
<style lang="scss" scoped>

.app-container {
  .header-con {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 5px;
      .title {
        margin-left: 5px;
        color: rgb(133, 133, 148);
        margin-bottom: 5px;
        font-size: 14px;
      }
      .num {
        margin-left: 5px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    img {
      height: 30px;
      width: 30px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
}
  .btnAdd {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        display:float;
        text-align: center;
      }
  
  .search-view {
    padding: 12rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  
    .search-input {
      background: #F5F5F5;
      color: #333333;
      margin-right: 36rpx;
    }
  
    .filter-panel {
      width: 100%;
      position: absolute;
      left: 0;
      top: 96rpx;
      background-color: rgba(0, 0, 0, 0.5);
  
      .filter-panel-content {
        background-color: #ffff;
        padding: 0 30rpx 30rpx;
  
        .filter-title {
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;
          padding: 30rpx 0;
        }
  
        .state-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
  
          .state-item {
            width: 210rpx;
            height: 72rpx;
            border: 1rpx solid rgba(0, 0, 0, 0.25);
            border-radius: 72rpx;
            text-align: center;
            line-height: 72rpx;
            margin: 0 20rpx 20rpx 0;
            font-size: 28rpx;
            color: #000000;
          }
  
          .active {
            background-color: rgba(222, 241, 255, 1);
            border: 1rpx solid rgba(22, 119, 255, 1);
          }
        }
      }
  
      .btn-box {
        display: flex;
        padding: 24rpx 30rpx;
        background-color: #fff;
        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
      }
    }
  }
  
  .list-item {
    margin: 5rpx;
    padding: 5rpx;
    background-color: #fff;
  
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 5rpx;
  
    }
  
    .item-row {
      padding: 0rpx;
  
      .row-label {
        color: rgba(0, 0, 0, 0.55);
      }
  
      .row-value {
        color: rgba(0, 0, 0, 0.85)
      }
    }
  
    .operate {
      display: flex;
      justify-content: flex-end;
  
      .btn {
        width: 146rpx;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 8rpx;
        margin-left: 5rpx;
        text-align: center;
      }
  
      .circulation {
        background: rgba(0, 0, 0, 0.04);
        margin-right: 24rpx;
        color: rgba(0, 0, 0, 0.85);
      }
  
      .filling {
        background: #2681FF;
        border-radius: 8rpx;
        color: #FFFFFF;
      }
    }
  }
  </style>
<style lang="scss" scoped>

.calendarHeader {
  margin: 0px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .header_select {
    margin: 0 0 0 10px;
    display: inline-block;
    vertical-align: middle;
  }
}
h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  margin: 0 0 0 0;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  color: #303133;
}

.btnAdd {
      width: 146rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 8rpx;
      display:float;
      text-align: center;
    }

.search-view {
  padding: 12rpx 32rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;


  .search-input {
    background: #F5F5F5;
    color: #333333;
    margin-right: 36rpx;
  }

  .filter-panel {
    width: 100%;
    position: absolute;
    left: 0;
    top: 96rpx;
    background-color: rgba(0, 0, 0, 0.5);

    .filter-panel-content {
      background-color: #ffff;
      padding: 0 30rpx 30rpx;

      .filter-title {
        color: #000000;
        font-size: 30rpx;
        font-weight: 500;
        padding: 30rpx 0;
      }

      .state-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .state-item {
          width: 210rpx;
          height: 72rpx;
          border: 1rpx solid rgba(0, 0, 0, 0.25);
          border-radius: 72rpx;
          text-align: center;
          line-height: 72rpx;
          margin: 0 20rpx 20rpx 0;
          font-size: 28rpx;
          color: #000000;
        }

        .active {
          background-color: rgba(222, 241, 255, 1);
          border: 1rpx solid rgba(22, 119, 255, 1);
        }
      }
    }

    .btn-box {
      display: flex;
      padding: 24rpx 30rpx;
      background-color: #fff;
      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
    }
  }
}


</style>
